<template>
    <cell-wrapper
      v-for="wrapperType in ['SHADOW', 'TABLE_CELL']"
      :key="wrapperType"
      :wrapper-type="wrapperType"
      :style="{ backgroundColor: contentStyle.backgroundColor }"
    >
      <text-display-cell
        v-if="!editState"
        :text="formatValue"
        :columnConfig="columnsConfig"
        v-bind="contentStyle"
      />
      <a-space v-else>
        <a-input-number
          :value="rangeValue.min"
          @change="(value) => handleValueChange(value, rangeValue.max)"
        />
        -
        <a-input-number
          :value="rangeValue.max"
          @change="(value) => handleValueChange(rangeValue.min, value)"
        />
      </a-space>
    </cell-wrapper>
  </template>
  
  <script>
    import { computed, defineComponent, reactive, watch } from 'vue';
    import TextDisplayCell from '@/components/page/tableCell/textDisplayCell.vue';
    import CellWrapper from '@/components/page/tableCell/cellWrapper.vue';
    import { addThousandsSeparatorToNumber, judgeCellEditable } from '@/utils/index';
  
    export default defineComponent({
      name: 'RangeNumberTableCell',
      components: {
        TextDisplayCell,
        CellWrapper,
      },
      inheritAttrs: false,
      props: {
        // 当前单元格的值
        value: {
          type: Object,
          default: () => ({
            min: 0,
            max: 0,
          }),
        },
        // 单元格的默认样式
        defaultStyle: {
          type: Object,
          default: () => {
            return {};
          },
        },
        // 单元格的条件样式配置
        conditionStyle: {
          type: Array,
          default: () => {
            return [];
          },
        },
        // 当前行的数据
        rowData: {
          type: Object,
          default: () => {
            return {};
          },
        },
        // 单元格条件配置的中使用的动态数据：key为数据的id，value为数据的值
        conditionValueMap: {
          type: Object,
          default: () => {
            return {};
          },
        },
        // 格式化配置
        format: {
          type: String,
          default: () => {
            return '';
          },
        },
        // 当前列的配置
        columnsConfig: {
          type: Object,
          default: () => {
            return {};
          },
        },
        // 当前单元格是否处于编辑状态
        isEdit: {
          type: Boolean,
          default: () => {
            return false;
          },
        },
      },
      emits: ['change'],
      setup(props, { emit }) {
        const editState = computed(() => {
          return (
            props.isEdit &&
            judgeCellEditable(props.columnsConfig, props.rowData, props.conditionValueMap)
          );
        });
        // 内容显示的样式
        const contentStyle = computed(() => {
          let { iconType, icon, color, backgroundColor } =
            props.columnsConfig.contentConfig.defaultStyle || {};
          return { iconType, icon, color, backgroundColor };
        });
        const rangeValue = reactive({
          min: 0,
          max: 0,
        });
        const formatValue = computed(() => {
          const { min, max } = props.value;
  
          if (props.columnsConfig.contentConfig.format === 'THOUSANDS_SEPARATOR') {
            return `${addThousandsSeparatorToNumber(min)} ~ ${addThousandsSeparatorToNumber(max)}`;
          }
  
          return `${min} ~ ${max}`;
        });
        watch(
          () => props.value,
          () => {
            const { min, max } = props.value;
            rangeValue.min = min;
            rangeValue.max = max;
          },
          { immediate: true, deep: true },
        );
        function handleValueChange(min, max) {
          emit('change', { min, max });
        }
        return {
          editState,
          contentStyle,
          rangeValue,
          formatValue,
          handleValueChange,
        };
      },
    });
  </script>
  